<template>
	<view class="df_house">
		<!-- banner区 -->
		<view class="top_address" @click="showCity = true">
			<view class="top_address_left">
				<image src="https://community.chuangxiangdianli.com/images/neighborimg/address.png" mode=""></image>
				<view>当前定位</view>
			</view>
			<view  class="top_address_right">{{selectedCity}}</view>
		</view>
		<view class="house_banner">
			<swiper class="swiper" :duration="duration" :autoplay="true" :circular="true" style="height: 100%;" :indicator-dots="true"
			 indicator-color="#585e65" indicator-active-color="#a3aab2">
				<swiper-item v-for="item in 4" :key="item">
					<image :src="'https://community.chuangxiangdianli.com/images/neighborimg/z_home_banner.png'" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 广告区域 -->
		<view class="house_nav">
			<view class="house_nav_fr" @click="goToRentalInfo('buyhouse')">
				<image :src="'https://community.chuangxiangdianli.com/images/neighborimg/maifang@2x.png'" mode=""></image>
				<text>买房</text>
			</view>
			<view class="house_nav_fl" @click="goToRentalInfo('renting')">
				<image :src="'https://community.chuangxiangdianli.com/images/neighborimg/zufang@2x.png'" mode=""></image>
				<text>租房</text>
			</view> 
			<view class="house_nav_foo">
				<image :src="'https://community.chuangxiangdianli.com/images/neighborimg/banner_1@2x.png'" mode=""></image>
			</view>
		</view>
		<!-- 推荐列表 -->
		<view class="house_li_top">
			<text class="top_hot">热门推荐</text>
			<view>
				<text style="color: #999;">查看更多</text>
				<image style="width: 32rpx; height: 32rpx; margin-left: 10rpx;" :src="'https://community.chuangxiangdianli.com/images/loginImg/you.png'"
				 mode=""></image>
			</view>
		</view>
		<view class="house_li_list">
			<houseList :houseInfoList="houseInfoList"></houseList>
		</view>
		 
		<!-- 出租、租售、弹框 -->
		<view class="df_oprn_frame" v-show="oprnFrame" @click="oprnFrame = false" ref="dfOprnFrame">
			<view class="oprn_type">
				<view class="type_li_item" @click="goToLeasehouse">
					<image class="type_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/wo_zu@2x.png'" mode=""></image>
					<text>我要出租</text>
				</view>
				<view class="type_li_item" @click="goToHousesell">
					<image class="type_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/wo_mai@2x.png'" mode=""></image>
					<text>房屋出售</text>
				</view>
			</view>
		</view> 
		<!-- tab --> 
		<u-picker mode="region" v-model="showCity" range="selector" confirm-color="#46c8ac" :params="params" @confirm="confirmCity"
		 safe-area-inset-bottom></u-picker>
		 <uLi-load-more v-if="houseInfoList.length>=2" :status="loadingType" :contentText="contentText"></uLi-load-more>
			<NeighborTab :changeOprnFrame="changeOprnFrame" :oprnFrame="oprnFrame"></NeighborTab> 
	</view>
</template>

<script>
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	import Upicker from "@/uview-ui/components/u-picker/u-picker.vue";
	var timer = null;
	import {
		checkPhone,
		filterCity
	} from '@/utils/utils.js'
	import NeighborTab from '../common/neighborTab.vue'
	// 房屋列表
	import houseList from '../common/houseList.vue'
	export default {
		components: {
			NeighborTab,
			houseList,
			Upicker,
			uLiLoadMore
		},
		data() {
			return {
				loadingText: '加载中...',
				 loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				 contentText: {
				        contentdown:'上拉显示更多',
				        contentrefresh: '正在加载...',
				        contentnomore: '没有更多数据了',
				},
				page:1,
				limit:10,
				params: {
					province: true,
					city: true,
					area: true
				},
				duration: 500,
				// 弹框
				oprnFrame: false,
				// 列表信息
				houseInfoList: [
					{
						area: null,
						community: {community_id:'' , community_name: ""},
						community_id: null,
						community_name: "",
						community_id: null,
						created_at: null,
						hall: null,
						house_type: "",
						id: null,
						image: "",
						money: "",
						room: null,
						title: "",
						toilet: null
					}
				],
				showCity: false,
				areaList: [],
				selectedCity:'',
				
			};
		},
		onPullDownRefresh(){
			this.page=1
			this.getbuyhouse(()=>{
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom: function() {
			console.log(1)
			var that=this;
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
				console.log('上拉')
		       if (timer != null) {
		           clearTimeout(timer);
		       }
		       timer = setTimeout(function() {
				   if (that.loadingType !== 'more') {//loadingType!=0;直接返回
				                  return false;
				    }
				    that.loadingType = 'loading';
				    uni.showNavigationBarLoading();//显示加载动画
				   that.page++;
				   console.log(that.page)
		           that.getbuyhouse()
		       }, 1000);
					
		},
		onShow() {
			this.getAreaLists()
			var  cityinfo=uni.getStorageSync('cityinfo')
			console.log(cityinfo)
			if(cityinfo){
				this.selectedCity=cityinfo.title
			}else{
				var userinfo=uni.getStorageSync('userInfo')
				console.log(userinfo)
				// {"data":{"province_id":15,"city_id":89,"area_id":1048},"title":"山东省-济南市-历城区"}
				this.selectedCity=userinfo.userInfo.address
				this.cityInfo={
						province_id:userinfo.userInfo.province_id,
						city_id:userinfo.userInfo.city_id,
						area_id:userinfo.userInfo.area_id
				}
			}
			this.getbuyhouse()
		},
		methods: {
			confirmCity(e) {
				let _this = this
				console.log(e)
				_this.selectedCity = e.province.label + '-' + e.city.label + '-' + e.area.label
				_this.cityInfo = filterCity(_this.areaList, e)
				console.log(_this.cityInfo)
				uni.setStorageSync('cityinfo',{
									data:_this.cityInfo,
									title:_this.selectedCity
									})
				// 获取小区数据
				// _this.getAllCommunity(_this.cityInfo) 
			},
			// 获取省市区数据
			getAreaLists() {
				this.$http.get('wechat/areaLists').then(res => {
					if (res.code == 200) {
						this.areaList = res.data
					}
				})
			},
			getbuyhouse(fx) {
				let data = {
					page: this.page,
					limit: this.limit,
					house_type: 'hot'
				}
				this.$http.get('Mini/circle/house/sell', data).then(res => {
					if (res.code == 200) {
						if(this.page>1){
							if(res.data.data.length>0){
								this.houseInfoList.push(...res.data.data)
							}else{
								this.loadingType = 'noMore';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}
						}else{
							this.houseInfoList = []
							this.houseInfoList=res.data.data
							uni.showNavigationBarLoading();
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					}else{
						uni.hideNavigationBarLoading();//关闭加载动画
						 uni.showNavigationBarLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					}
					if(fx){
						fx()
					}
				})
			},
			goToRentalInfo(pageType) {
				uni.navigateTo({
					url: '/neighbor/rentalInfo/index?pageType=' + pageType
				})
			},
			changeOprnFrame(){  
				this.$parent.oprnFrame = !this.$parent.oprnFrame   
			},
			goToLeasehouse(){
				uni.navigateTo({
					url: '/neighbor/leasehouse/index'
				})
			},
			goToHousesell(){
				uni.navigateTo({
					url: '/neighbor/housesell/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.df_house {
		margin-bottom: 120rpx;
		.top_address{
			padding: 0 30rpx 0 24rpx;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top_address_left{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				&>image{
					width: 32rpx;
					height: 40rpx;
					margin-right: 13rpx;
				}
				&>view{
					font-size: 30rpx;
				}
			}
			.top_address_right{
				font-size: 30rpx;
			}
		}
		.house_banner {
			height: 318rpx;
		}

		.house_nav {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx;
			height: 430rpx;

			.house_nav_fl,
			.house_nav_fr {
				width: 334rpx;
				height: 161rpx;
				color: #fff;
				font-size: 32rpx;

				text {
					position: relative;
					top: -130rpx;
					left: 40rpx;
				}
			}

			.house_nav_foo {
				height: 157rpx;
				width: 100%;
			}
		}

		.house_li_top {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			height: 124rpx;
			line-height: 124rpx;

			.top_hot {
				font-size: 34rpx;
				font-weight: 700;

				&::before {
					margin-right: 10rpx;
					position: relative;
					content: '';
					width: 5rpx;
					height: 36rpx;
					border: 5rpx solid #FF6716;

				}
			}
		}
	
		.df_oprn_frame{
			position: fixed;
			top: 0;
			width: 100vw;
			height: calc(100vh - 120rpx);
			background-color: #fff;
			.oprn_type{
				display: flex;
				justify-content: space-around;
				position: absolute;
				width: 100%;
				bottom: 20rpx;
				height: 260rpx; 
				.type_li_item{
					flex: 1;
					display: flex;
					flex-direction: column;
					text-align: center;
					.type_img{
						margin: 0 auto;
						height: 174rpx;
						width: 174rpx;
					}
				}
			}
		}
		.house_li_list{
			width: 100%;
			padding: 0 30rpx;
		}
	}
</style>
